<template>
  <view class="mine-page">
    <view class="user-info">
      <image class="avatar" src="/static/test/avatar.png" mode="aspectFill"></image>
      <view class="infos">
        <view class="name">{{userName}}</view>
        <view class="info">
          <image v-if="userInfo.type == '1'" class="label" src="/static/icon/city-label.png"></image>
          <view class="tag">{{userInfo.grade || '普通用户'}}</view>
        </view>
      </view>
    </view>
    <view class="total-info">
      <view class="item">
        <view class="val">{{userInfo.total_order || '0'}}</view>
        <view class="txt">总订单数</view>
      </view>
      <view class="item">
        <view class="val">{{userInfo.total_serve_price || '0.00'}}</view>
        <view class="txt">订单总价</view>
      </view>
      <view class="item">
        <view class="val">{{userInfo.total_additional_price || '0.00'}}</view>
        <view class="txt">总附加费</view>
      </view>
    </view>
    <view class="menu-list">
      <view class="cell" @click="skipPage" data-url="/subpages/statistics/statistics">
        <image class="icon" src="/static/icon/mine-icon-1.png"></image>
        <view class="name">订单统计</view>
        <view class="arrow"></view>
      </view>
      <view class="cell" @click="handleCustome">
        <image class="icon" src="/static/icon/mine-icon-2.png"></image>
        <view class="name">客服中心</view>
        <view class="arrow"></view>
      </view>
      <view class="cell" @click="skipPage" data-url="/subpages/apply/apply">
        <image class="icon" src="/static/icon/mine-icon-3.png"></image>
        <view class="name">成为师傅</view>
        <view class="arrow"></view>
      </view>
      <view class="cell" @click="handleExit">
        <image class="icon" src="/static/icon/mine-icon-4.png"></image>
        <view class="name">退出登录</view>
        <view class="arrow"></view>
      </view>
    </view>
    
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
      <view class="service-wrapper">
        <view class="header">
          <view class="close" @click="closePop"></view>
          <view class="title">客服中心</view>
        </view>
        <view class="phone-box">
          <view class="phone">{{systemInfo.customer_phone}}</view>
          <view class="btn" @click="handlePhone">
            <view class="icon">
              <image class="img" src="/static/icon/service.png"></image>
            </view>
            <view>拨打</view>
          </view>
        </view>
        <view class="code-box">
          <view class="code" @longtap="handleSave">
            <image class="img" :src="systemInfo.customer_image"></image>
          </view>
          <view class="prompt">长按保存二维码，添加官方客服微信</view>
        </view>
      </view>
    </uni-popup>
    
  </view>
</template>

<script>
  import url from '@/static/test/code.png';
  const app = getApp();
  import { SystemApi } from '@/api/'
  
  export default {
    data() {
      return {
        userInfo: {},
        systemInfo: {},
      };
    },
    computed: {
      userName() {
        if (this.userInfo.name) {
          return this.userInfo.name
        }
        if (this.userInfo.phone) {
          return this.userInfo.phone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$3')
        }
        return ''
      }
    },
    methods: {
      loadRes(callback) {
        SystemApi().then((res) => {
          this.systemInfo = res.data
          app.getUserInfo((resu) => {
            this.userInfo = resu
            typeof callback === 'function' && callback()
          })
        }).catch(() => {
          typeof callback === 'function' && callback()
        })
      },
      skipPage(e) {
        const url = e.currentTarget.dataset.url
        if (url === '/subpages/apply/apply') {
          const status = this.userInfo.status
          if (status == '0') {
            uni.showModal({
              content: '资料审核中，请耐心等待',
              showCancel: false,
              confirmText: '我知道了'
            })
            return
          } else if (status == '1') {
            uni.showModal({
              content: '您已成为师傅，无需再申请',
              showCancel: false,
              confirmText: '我知道了'
            })
            return
          }
        }
        uni.navigateTo({
          url
        })
      },
      // 客服
      handleCustome() {
        this.$refs.popup.open()
      },
      closePop() {
        this.$refs.popup.close()
      },
      // 退出登录
      handleExit() {
        uni.showModal({
          content: '是否确定退出当前登录？',
          success(res) {
            if (res.confirm) {
              uni.clearStorageSync()
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }
          }
        })
      },
      // 拨号
      handlePhone() {
        uni.makePhoneCall({
          phoneNumber: this.systemInfo?.customer_phone || ''
        })
      },
      // 长按保存
      handleSave() {
        uni.downloadFile({
          url: this.systemInfo['customer_image'],
          success(resu) {
            uni.saveImageToPhotosAlbum({
              filePath: resu.tempFilePath,
              success() {
                uni.showToast({
                  icon: 'success',
                  title: '保存成功'
                })
              }
            })
          }
        })
      }
    },
    onShow() {
      this.loadRes()
    },
    onPullDownRefresh() {
      this.loadRes(() => {
        uni.stopPullDownRefresh()
      })
    }
  }
</script>

<style lang="scss">
.mine-page {
  overflow: hidden;
  background: linear-gradient(to bottom, #1f649f 0, #1f649f 284rpx, #f5f5f5 285rpx, #f5f5f5 100%);
  .user-info {
    width: 690rpx;
    margin: auto 30rpx;
    @include flex;
    padding-top: 30rpx;
    .avatar {
      width: 126rpx;
      height: 126rpx;
      margin-right: 22rpx;
    }
    .infos {
      flex: 1;
      .name {
        font-size: 36rpx;
        color: #FEFEFE;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 16rpx;
      }
      .info {
        @include flex(row,center,flex-start);
        .label {
          width: 172rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
        .tag {
          height: 32rpx;
          line-height: 32rpx;
          background: linear-gradient(-12deg, #C12E32, #FDAD5E);
          border-radius: 5rpx;
          padding: 0 12rpx;
          font-size: 22rpx;
          color: #FFFFFF;
        }
      }
    }
  }
  .total-info {
    width: 690rpx;
    height: 172rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    margin: 36rpx auto 30rpx;
    @include flex;
    .item {
      flex: 1;
      @include flex(column);
      line-height: 1.2;
      .val {
        font-size: 48rpx;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        color: #EA9130;
        margin-bottom: 12rpx;
      }
      .txt {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .menu-list {
    width: 690rpx;
    background-color: #fff;
    margin: auto;
    border-radius: 10rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    .cell {
      @include flex;
      height: 110rpx;
      position: relative;
      @include line;
      .icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 12rpx;
      }
      .name {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
      }
      .arrow {
        @include arrow(48, #333, 1);
      }
    }
  }
  .service-wrapper {
    .header {
      height: 100rpx;
      .close {
        @include close;
        left: 0;
        top: 6rpx;
      }
      .title {
        text-align: center;
        line-height: 100rpx;
        font-size: 30rpx;
        color: #000000;
        font-weight: bold;
      }
    }
    .phone-box {
      @include flex(row,center,space-between);
      margin: auto 30rpx;
      position: relative;
      padding: 24rpx 0;
      @include line;
      .phone {
        font-size: 26rpx;
        color: #333333;
      }
      .btn {
        font-size: 24rpx;
        color: #333333;
        @include flex(column);
        .icon {
          width: 54rpx;
          height: 54rpx;
          border-radius: 50%;
          border: 1px solid #DCDCDC;
          box-sizing: border-box;
          margin-bottom: 8rpx;
          @include flex;
          .img {
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
    }
    .code-box {
      padding: 40rpx 0 94rpx;
      .code {
        width: 248rpx;
        height: 248rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        border: 1px solid #DCDCDC;
        margin: 0 auto 30rpx;
        @include flex;
        .img {
          width: 222rpx;
          height: 222rpx;
        }
      }
      .prompt {
        font-size: 20rpx;
        color: #666666;
        text-align: center;
      }
    }
  }
}
</style>
